<template>
	<view>
		<uni-swipe-action>
			<uni-search-bar bgColor="white" placeholder="请输入用户昵称" @confirm="search" @cancel="reset" @clear="reset" />
			<uni-swipe-action-item v-for="(user,index) in userInfoList" :key="index" :right-options="options"
				@click="onClick($event,user.userId)">
				<view
					style="display: flex;justify-content: space-between;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;padding: 20rpx;">
					<view style="display: flex;">
						<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" :src="user.userAvatar"
								alt="">
						</view>
						<view style="margin-left: 20rpx;">
							<view>{{user.userName}}</view>
							<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">{{user.userPhone}}</view>
						</view>
					</view>
					<view style="text-align: center;">
						<view style="color: #808080;">{{user.userIdentity}}</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="center" width="92%">
			<view>
				<uni-search-bar bgColor="white" placeholder="请输入用户昵称" @confirm="search1" @cancel="reset1"
					@clear="reset1" />
			</view>
			<view style="padding: 2%;">
				<view v-for="(user,index) in allUserInfoList" :key="index"
					@click="addRole(user.userId,user.userUsername)"
					style="display: flex;justify-content: space-between;margin-top: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;">
					<view style="display: flex;">
						<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" :src="user.userAvatar"
								alt="">
						</view>
						<view style="margin-left: 20rpx;">
							<view>{{user.userUsername}}</view>
							<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">{{user.userPhone}}</view>
						</view>
					</view>
					<view style="text-align: center;">
						<view style="color: #808080;">{{user.depName}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userRequest: {
					pageNo: 0,
					pageSize: 10,
					username: null
				},
				name: null,
				userInfoList: [],
				allUserInfoList: [],
				options: [{
					text: '委任下届主席',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '解雇',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				show: false
			}
		},
		onLoad() { //option为object类型，会序列化上个页面传递的参数
			this.getUserList()
		}, // 监听下拉刷新动作
		onPullDownRefresh() {
			// 重新获取数据
			this.getUserList()
			// 结束下拉刷新
			setTimeout(function() {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			this.show = true;
		},
		methods: {
			// 任职社联管理员
			addRole(userId, userName) {
				this.show = false;
				uni.showModal({
					content: `您确定要任职 ${userName} 为【社联管理员】吗?`,
					success: res => {
						if (res.confirm) {
							// 任职
							this.job(userId, true)
						} else {
							this.show = true
						}
					}
				})
			},
			// 搜索
			search1(res) {
				this.userRequest.username = res.value;
				this.userRequest.pageNo = 0;
				this.allUserInfoList = [];
				this.getAllUserList();
			},
			// 重置
			reset1() {
				this.userRequest.pageNo = 0;
				this.userRequest.username = null;
				this.allUserInfoList = [];
				this.getAllUserList()
			},
			getAllUserList() {
				this.userRequest.pageNo++;
				this.$http.request({
					url: '/organizations/web/user/users',
					method: 'POST',
					data: this.userRequest
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.allUserInfoList = [
							...this.allUserInfoList,
							...res.data
						]
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 点击
			onClick(e, userId) {
				if (e.index == 0) {
					// 委任下届社联主席
					uni.showModal({
						title: '提示',
						content: '您确定要委任该用户为下届【社联主席】吗?',
						success: (res) => {
							if (res.confirm) {
								this.nextRoleBoss(userId)
							}
						}
					})
				} else if (e.index == 1) {
					// 解雇
					uni.showModal({
						title: '提示',
						content: '您确定要解雇该用户的【社联管理员】职位吗?',
						success: (res) => {
							if (res.confirm) {
								this.job(userId, false)
							}
						}
					})
				}
			},
			// 委任下届社联主席
			nextRoleBoss(targetId) {
				this.$http.request({
					url: `/organizations/web/role/role/${targetId}`,
					method: 'POST'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								uni.switchTab({
									url: '../my'
								})
							}
						});
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			// 任职/解雇
			job(targetId, status) {
				this.$http.request({
					url: `/organizations/web/role/role/${targetId}/${status}`,
					method: 'POST'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								this.getUserList()
							}
						});
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			getUserList() {
				var url = `/organizations/web/role/role`;
				if (this.name !== null) {
					url = `/organizations/web/role/role/${this.name}`
				}
				this.$http.request({
					url: url
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.userInfoList = res.data;
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 搜索
			search(res) {
				this.name = res.value;
				this.getUserList();
			},
			// 重置
			reset() {
				this.name = null;
				this.getUserList()
			}
		}
	}
</script>

<style>
</style>
